<template>
	<div class="avatar">
		<div class="avatar__inner">
			<img src="@/assets/user.svg" alt="" />
		</div>
	</div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
	setup(props, { emit, slots, attrs }) {},
	data() {
		return {}
	},
	computed: {},
	mounted() {},
	methods: {},
	components: {}
})
</script>

<style lang="scss" scoped="scoped">
.avatar {
	border-radius: 50%;
	height: 100%;
	width: 100%;
	padding: 4px;
	background: #fff;
	box-sizing: border-box;
	box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
}
.avatar__inner {
	height: 100%;
	width: 100%;
	border-radius: 50%;
	background-color: $color_main;

	img {
		width: 110%;
		height: 110%;
		margin: -5%;
		object-position: center;
	}
}
</style>
